<script lang="ts" setup>
import { Close, Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

interface TagProps {
  title?: string,
  close?: boolean
}
const Props = withDefaults(defineProps<TagProps>(), {
  msg: '',
  close: false
})

// const props = withDefaults(defineProps<{
// 	  title?: string // 是否必传
// 	}>(),{
// 	  title:'默认值'
// 	})
// 	// 非ts写法
// 	const props = defineProps({
// 	    title: {
// 	      type: String,
// 	      default: '默认值',
// 	      required: false
// 	    }
//   	})

</script>

<template>
  <div class="tag">
    <i class="dot" />
    <span>{{ Props.title }}</span>
    <el-icon v-if="close">
      <Close />
    </el-icon>
  </div>
</template>

<style lang="scss" scoped>
.tag {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  // background-color: white;
  border-radius: 5px;
  height: 24px;
  width: fit-content;
  color: rgb(71, 71, 71);
  font-size: 14px;
  box-shadow: 0px 0px 5px 2px rgb(222, 222, 222);
  border: .1px solid rgba(255, 255, 255, 0);
  transition: .5s;
  // filter: blur(10px);
  backdrop-filter: blur(10px);

  .dot {
    display: block;
    background-color: rgb(171, 227, 235);
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }

  span {
    display: block;
  }

  i {
    color: grey;
    cursor: pointer;

    &:hover {
      color: rgb(55, 55, 55);
    }
  }

  &:hover {
    border: .1px solid rgba(218, 218, 218, .8);
    box-shadow: 0px 0px 5px 3px rgb(222, 222, 222);
    color: grey;
  }

  &>* {
    margin-right: 10px;
  }

  &>:last-child {
    margin-right: 0px;
  }

}
</style>